import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import { useIntersectionObserver } from '@vueuse/core'
import errorImg from '@/assets/images/200.png'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
// import XtxMessage from '@/components/message/index.vue'
// 这里用的是vue指定好的类型
import { App } from 'vue'

export default {
  // 需要解决app的类型 (使用vue指定好的App类型  例如下面的选项)
  // 这里的app 值得及时Vue应用实例, 类型是固定的 且 确定的!!!   Vue提供好了, 只需要导入使用即可
  install(app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)

    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)

    //省市区三级联动
    app.component(XtxCity.name, XtxCity)

    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    app.component('XtxCheckbox', XtxCheckbox)
    // app.component('XtxMessage', XtxMessage)

    app.directive('lazy', {
      // 指令的钩子函数
      // vue2 inserted updated
      // vue3 mounted
      // mounted(el, binding){}
      mounted(el, { value }) {
        // console.log(el, value)
        // el.src = value    如果这么写会直接卸载html没有任何区别
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 图片进入可是区域后 加载资源
            el.src = value
            // 进入可是区域之后然后直接关闭
            stop()

            // 图片地址出问题了... 需要给一张默认的图片 注册error
            el.onerror = () => {
              el.src = errorImg
            }
          }
        })
      },
    })
  },
}
